<template>
	<view class="content">
		<view class="date-picker kb" v-if="showClass" >
				<searchCombox :candidates="peopleList" :isJSON="true" keyName="title" placeholder="请选择" v-model="regiPerson" @input="personInput" @select="personSelect">        </searchCombox>
		</view>
		<view class="kb1" v-if="!showClass">
		<text>类别：</text> <input disabled="disabled" v-model="store.title" style="font-size: 32rpx;" placeholder="" />		
		</view>
		<view class="kb1" >
		<text>店名：</text> <input :disabled="isDisabled" v-model="store.storeName" style="font-size: 32rpx;" placeholder="请输入店名称" />		
		</view>
		
		<view class="kb1" >
		<text>地址：</text> <input :disabled="isDisabled" v-model="store.storeAddress" style="font-size: 32rpx;" placeholder="请输入地址" />		
		</view>
		<view class="kb1" >
		<text>负责人：</text> <input :disabled="isDisabled" maxlength="11" v-model="store.contacts" style="font-size: 32rpx;" placeholder="请输入负责" />		
		</view>
		
		<view class="kb1" >
		<text>电话：</text> <input :disabled="isDisabled" type="number" maxlength="11" v-model="store.cell" style="font-size: 32rpx;" placeholder="请输入店铺电话" />		
		</view>
		
		<view style="width: 100%;margin-top: 40rpx;">
			<image class="img" :src="store.storefront" @click="upLoadPic(1)"></image>
			<image class="img" :src="store.license" @click="upLoadPic(2)"></image>

		</view>
		
		<button class="submit" v-if="submitStr.length >0" @click="submit()">{{submitStr}}</button>
	</view>
</template>

<script>
	import {
		getStoreClass,addStore,selectUserStore
	} from "@/api/api.js"
	 import searchCombox from '@/utils/search-combox/search-combox.vue';
	export default {
		
		components: {
					searchCombox
				},
		data() {
			return {
				store:{
					storeName:'',
					storeAddress:'',
					contacts:'',
					cell:'',
					classify:0,
					storefront:'../../static/images/st_update_mm.png',
					license:'../../static/images/st_update_yy.png',
				},
				regiPerson :'',
				peopleList :[{id:'1',name:'选项1'},{id:'1',name:'选项1'}],
				img1:'',
				img2:'',
				isDisabled:false,
				submitStr:'申请',
				showClass:true,
				
			}
		},
		onLoad() {
		this.selectUserStore()
		this.getStoreClass()	
		},
		methods: {
			personSelect(e) {
							console.log("登记人员选择",e.id) 
							this.store.classify = e.id
						},
			 
						// 处室选择
						changePicker(e) {
							console.log('deptList', this.deptList)
						},
						async getStoreClass() {
							let that = this
							uni.showLoading({
								title: '正在加载'
							})
							getStoreClass().then((res) => {
								that.peopleList = res.data
								
								uni.hideLoading()
							}).catch((res) => {
								this.$util.Tips({
									title: res
								});
								uni.hideLoading()
							})
						},
						async selectUserStore() {
							let that = this
							
							selectUserStore().then((res) => {
								that.store = res.data
								that.isDisabled=true
								that.showClass = false
								if(res.data.status == 0){
									that.submitStr ='审核中'
								}else if(res.data.status == 1){
									that.submitStr =''
								}if(res.data.status == 2){
									that.submitStr ='修改申请'
									that.isDisabled=false
									that.showClass = true
								}
								
								uni.hideLoading()
							}).catch((res) => {
								console.log(res)
								if(res.message.length >0){
									this.$util.Tips({
										title: res
									});
								}
								
								uni.hideLoading()
							})
						},
						async submit(){
							if(this.submitStr =='审核中'){
								return;
							}
							if(this.store.classify <= 0){
								uni.showToast({
								  title: "分类不能为空",
								  icon: "none",
								});
								return;
							}
							if(this.store.storeName.length <= 0){
								uni.showToast({
								  title: "店名不能为空",
								  icon: "none",
								});
								return;
							}
							if(this.store.storeAddress.length <= 0){
								uni.showToast({
								  title: "地址不能为空",
								  icon: "none",
								});
								return;
							}
							if(this.store.contacts.length <= 0){
								uni.showToast({
								  title: "负责人不能为空",
								  icon: "none",
								});
								return;
								}
							
							if(this.store.cell.length <= 0){
								uni.showToast({
								  title: "电话不能为空",
								  icon: "none",
								});
								return;
							}
							if(this.img1.length <= 0){
								uni.showToast({
								  title: "请上传门店图",
								  icon: "none",
								});
								return;
							}
							if(this.img2.length <= 0){
								uni.showToast({
								  title: "请上营业执照",
								  icon: "none",
								});
								return;
							}
							this.store.storefront = this.img1;
							 this.store.license = this.img2;
							addStore(this.store)
							  .then((res) => {
							    uni.showToast({
							      title: res.message,
							      icon: "success",
							    });
							    setTimeout(() => {
							      uni.navigateBack();
							    }, 2000);
							  })
							  .catch((res) => {
							    that.$util.Tips({
							      title: res,
							    });
							  });
						},
						upLoadPic(type) {
						if(this.isDisabled){
							return;
						}	
						  let that = this;
						  that.$util.uploadImageOne(
						    {
						      url: "user/upload/image",
						      name: "multipart",
						      model: "user",
						      pid: "0",
						    },
						    function (res) {
						      const { url } = res.data;
						      if (type == 1) {
						        that.store.storefront = url;
								that.img1 = url.split(".com/")[1];
						      }
						      if (type == 2) {
						        that.store.license = url;
								that.img2 = url.split(".com/")[1];
						      }
						      console.log("res========", url);
						    }
						  ),
						    function (err) {
						      that.$util.Tips({
						        title: err,
						      });
						    };
						},
		}
	}
</script>

<style>
	.content{
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	.kb{
		background-color: white;
		border-radius: 12rpx;
		margin-top: 20rpx;
		height: 80rpx;
		width: 96%;
		line-height: 80rpx;
	}
	.kb1{
		background-color: white;
		border-radius: 12rpx;
		margin-top: 20rpx;
		height: 80rpx;
		width: 96%;
		line-height: 80rpx;
		padding: 14rpx;
		display: flex;
		font-size: 32rpx;
		justify-items: center;
		align-items: center;
		
	}
	.img{
		width: 130rpx;
		height: 130rpx;
		margin-left: 30rpx;
	}
	.submit{
		width: 90%;
		height: 80rpx;
		background-color: #4188f1;
		border-radius: 120rpx;
		line-height: 80rpx;
		color: white;
		font-size: 38rpx;
		margin-top: 100rpx;
		
	}

</style>
